<!DOCTYPE html>
<html lang="en">
<head>
  <!--includes meta tags, title and more header definitions-->
  {% include header.html %}
</head>
<body >
<div class="off-screen" id="off-screen">
  {% include navbar.html %}

  <div class="row">
     <div class="col-2 sidebar hidden-on-xsmall">
       {% include sidebar.html %}
     </div>
     <div class="col-10">
       <div class="main-container">
        {{content}}
       </div>
     </div>
  </div>

  {% include off_screen_menu.html %}

  {% include footer.html %}
</div>

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    searchable = $('.searchable li')     

    $('#search').keyup(function(){
      text = $(this).val().toLowerCase();

      searchable.each(function(){
        if ($(this).text().search(new RegExp(text, "i")) < 0) {
          $(this).hide(); 
          } else {
            $(this).show(); 
          }
      });
    });

  }); 
</script>
</body>
</html>
